.swiper {
  @apply w-page h-screen box-border;
  .swiperItem,
  .videoNote,
  .video {
    background-color: rgba(0, 0, 0, 0.95);
    @apply w-full h-full box-border;
  }
  .videoNote {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    @apply text-white;
  }
  .video {
    @apply relative;
  }
  .videoPlay {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    @apply w-116px h-116px absolute;
  }
}
.noteDetail {
  @apply absolute bottom-86px left-0 right-0 box-border;
  .noteDetailMask {
    background: linear-gradient(180deg, #00000000 0%, #000000bf 100%);
  }
  .notePub {
    @apply flex flex-row items-center box-border px-32px;
    .concernBtn {
      width: 112px;
      height: 56px;
      @apply box-border bg-primary flex flex-row justify-center items-center text-24px text-white rounded-32px;
      &.concerned {
        border: 1px solid rgba(255, 255, 255, 0.6);
        @apply bg-transparent;
      }
    }
  }
  .relatedWord {
    height: 72px;
    background-color: rgba(0, 0, 0, 0.4);
    @apply w-page px-32px box-border flex flex-row items-center text-30px text-white;
  }
  .noteDesc {
    line-height: 42px !important;
    @apply text-white text-30px;
    &.expand {
      height: auto;
      // 这里设置为49vh, 当改动该值时需要同步更改页面逻辑中对应的值!
      max-height: 49vh;
      @apply overflow-auto;
    }
    &.collapsed {
      height: 84px;
      @apply overflow-hidden;
    }
  }
  .expandText {
    line-height: 42px !important;
    color: #bbbbbb;
    @apply box-border text-30px;
  }
}
.bottomAction {
  height: 116px;
  background-color: rgba(0, 0, 0, 0.95);
  @apply flex flex-row items-center box-border px-32px;
  .commentBtn {
    height: 80px;
    background-color: rgba(247, 247, 247, 0.1);
    @apply box-border rounded-60px text-light text-28px flex flex-row items-center justify-start gap-8px flex-1 px-26px;
  }
  .actionItem {
    @apply box-border flex flex-row items-center gap-10px text-light text-28px;
  }
}
.commentPopup {
  height: 960px;
  z-index: 99999;
  @apply box-border bg-white;
  .commentPannel {
    @apply box-border;
    .popupTitle {
      height: 100px;
      border-bottom: 1px solid #f2f2f2;
      @apply font-500 text-32px text-bold box-border flex flex-row justify-center items-center;
    }
    .mainList {
      height: calc(960px - 100px - 96px);
      @apply box-border;
    }
    .commentList {
      @apply py-32px;
    }
    .comment {
      border-bottom: 1px solid #f2f2f2 !important;
      @apply px-32px box-border;
    }
    .popupBottomArea {
      width: 750px;
      height: 96px;
      border-top: 1px solid #f2f2f2;
      @apply box-border flex flex-row justify-center items-center bg-white;
    }
    .popupBottom {
      width: 686px;
      height: 80px;
      background-color: #f7f7f7;
      @apply box-border rounded-60px flex flex-row items-center text-light text-28px px-32px;
    }
  }
}
.flowModuleMask {
  --backdrop-z-index: 99999;
  --backdrop-background-color: rgba(0, 0, 0, 0.7);
  .flowModule {
    bottom: 386px;
    width: 686px;
    @apply absolute left-0 right-0 box-border mx-32px;
    .flowModuleClose {
      width: 32px;
      height: 32px;
      @apply box-border mb-16px ml-auto rounded-full bg-white flex flex-row justify-center items-center;
    }
  }
}
.fixedFlowModule {
  width: 290px;
  height: 64px;
  border-radius: 32px 0 0 32px;
  background: #11111199;
  top: calc(var(--navtop) + 32px);
  @apply absolute right-0 box-border flex flex-row justify-center items-center text-white text-28px;
}
